<template>
  <div class="channel-wrap">
    <van-cell center :border="false">
      <template #title>
        <span class="channel-text">我的频道</span>
      </template>
      <van-button
        type="danger"
        size="small"
        round
        class="channel-btn"
        @click="isIconShow = !isIconShow"
      >
        {{ isIconShow ? "完成" : "编辑" }}
      </van-button>
    </van-cell>
    <van-grid :gutter="10" class="channel-grid">
      <van-grid-item
        :class="{ active: index === active }"
        :text="item.name"
        :icon="isIconShow && index !== 0 ? 'clear' : ''"
        v-for="(item, index) in channelsDate"
        :key="index"
        class="isHeightLight"
        @click="onUserRecommend(index)"
      />
    </van-grid>
    <van-cell center :border="false">
      <template #title>
        <span class="channel-text">频道推荐</span>
      </template>
    </van-cell>
    <van-grid :gutter="10" class="channel-grid">
      <van-grid-item
        :text="item.name"
        v-for="(item, index) in recommendChannels"
        :key="index"
        @click="onAdd(item)"
      />
    </van-grid>
  </div>
</template>
<script>
import {
  getAllChannels,
  onLineStorage
} from '@/api/user.js'
import { setItem } from '@/utils/storage'
import { mapState } from 'vuex'
export default {
  name: 'ChannelEdit',
  data () {
    return {
      allChannelsDate: [], // 所有频道列表
      isIconShow: false // 叉号是否隐藏(false 编辑 true 完成)
    }
  },
  props: {
    channelsDate: {
      type: Array,
      require: true
    },
    active: {
      type: Number,
      require: true
    }
  },
  computed: {
    ...mapState(['user']),
    // 推荐频道列表（所有频道 - 我的频道）
    recommendChannels () {
      const body = []
      this.channelsDate.forEach((item) => {
        body.push(item.id)
      })
      return this.allChannelsDate.filter((item) => {
        return body.indexOf(item.id) === -1
      })
    }
  },
  created () {
    this.handleChannels()
  },
  methods: {
    // 获取所有的频道类表
    async handleChannels () {
      try {
        const { data } = await getAllChannels()
        this.allChannelsDate = data.data.channels
      } catch (error) {
        console.log('error', error)
      }
    },
    // 增加功能
    async onAdd (value) {
      this.channelsDate.push(value)
      // //数据持久化sep:
      if (this.user) {
        // 登录的存在线上
        const body = {
          channels: [
            {
              id: value.id, // 频道id
              seq: this.channelsDate.length // 顺序序号
            }
          ]
        }
        try {
          const result = await onLineStorage(body) // 这个没有成功
        } catch (error) {
          console.log(error, 'err')
        }
      } else {
        // 未登录的存在本地
        setItem('user-channels', this.channelsDate)
      }
    },
    // 编辑我的频道
    onUserRecommend (index) {
      if (this.isIconShow && index !== 0) {
        // 若是编辑 删除频道
        this.deleteRecommend(index)
      } else {
        // 若是完成 切换频道
        this.switchRcommend(index)
      }
    },
    // 删除频道
    async deleteRecommend (index) {
      const value = true // 不关弹出层
      if (index <= this.active) {
        this.$emit('handleIsShow', this.active - 1, value)
      }
      this.channelsDate.splice(index, 1)
      // 数据持久化
      if (this.user) {
        // 登录的存在线上(这个没有成功)
      } else {
        // 未登录的存在本地
        setItem('user-channels', this.channelsDate)
      }
    },
    // 切换频道
    switchRcommend (index, value) {
      value = false // 关弹出层
      // 切换频道并关闭弹出层
      this.$emit('handleIsShow', index, value)
    }
  }
}
</script>
<style scoped lang='less'>
.channel-wrap {
  padding-top: 54px;
  .channel-text {
    font-size: 16px;
    color: #222;
  }
  .channel-btn {
    width: 70px;
    background-color: white;
    border: 1px solid red;
    color: red;
    font-size: 16px;
  }
  .channel-grid {
    padding-top: 2px;
  }
  .van-grid-item {
    width: 80px;
    height: 43px;
  }
  /deep/.van-grid-item__content {
    padding: 0;
  }
  /deep/.van-grid-item__text {
    font-size: 14px;
    color: #222;
    margin-top: 0;
  }
  /deep/.van-icon {
    position: absolute;
    top: -13px;
    right: -12px;
    font-size: 20px;
  }
  .active {
    /deep/.van-grid-item__text {
      color: red;
    }
  }
}
</style>
